<template>
    <div class="ex-pictures">
        <div class="ep-wrapper">
            <div class="ep-type">
                <div class="ep-type-detail">News type</div>
                <div class="ep-heng">
                    -
                </div>
                <div class="ep-type-date">03/19/2024</div>
                <div class="ep-heng">
                    -
                </div>
                <div class="ep-type-author">admin</div>
            </div>
            <div class="ep-title">
                This is a news headline
            </div>
        </div>

        <!-- <div class="ep-content" v-if="show">
            <div class="epc-card">
                <div class="epc-img">
                </div>
            </div>

        </div> -->

    </div>

</template>
<script setup lang="ts">
import { ref } from 'vue'
let show = ref(true);

</script>
<style scoped lang="scss">
.ex-pictures {
    padding: 0 160px;
    background: #fff;
    width: 1600px;
    // height: 1760px;

    .ep-wrapper {
        padding-left: 107px;
        
        .ep-type {
            display: inline-flex;

            .ep-type-detail {
                height: 22px;
                font-size: 16px;
                line-height: 22px;
                color: #C78E66;
            }

            .ep-heng {
                width: 12px;
                margin: 0 9px;
                line-height: 22px;
                // border-bottom: 1px solid rgba(0, 0, 0, 0.25);
                font-size: 20px;

            }

            .ep-type-date {
                width: 89px;
                // text-align: center;
                font-size: 16px;
                line-height: 22px;
            }

            .ep-type-author{
                width: 89px;
                // text-align: center;
                font-size: 16px;
                line-height: 22px;
            }
        }

        .ep-title {
            width: 100%;
            font-size: 64px;
            color: #30363A;
            line-height: 112px;
            font-weight: 700;
        }

        .ep-des {
            width: 100%;
            // text-align: center;
            font-size: 32px;
            // line-height: 112px;
        }
    }


    // .ep-content {
    //     width: 100%;
    //     display: inline-flex;
    //     justify-content: space-between;
    //     // margin-bottom: 10px;

    //     .epc-card {
    //         cursor: pointer;
    //         overflow: hidden;
    //         margin-top: 79px;


    //         .epc-img {
    //             width: 1574px;
    //             height: 855px;
    //             background-color: rgb(202, 201, 201);


    //             img {
    //                 width: 1574px;
    //                 max-height: 855px;
    //                 object-fit: cover;
    //                 transition: all 0.6s;
    //             }
    //         }


    //     }

    //     .epc-card:hover .epc-img img {
    //         transform: scale(1.05);
    //     }

    // }
}
</style>
